﻿@model SMECustomerWebsite.Models.ViewModels.ProductHandbook.ProductHandbookCustomerChecklistViewModel
<ul id="menu_product_handbook_detail" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
    <li role="presentation" class="">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailInfoTab, "ProductDetail", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId }, null)
    </li>
    <li role="presentation" class="active">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailChecklistTab, "Checklist", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId.ToString() }, null)
    </li>
</ul>
<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>CHECKLIST CUSTOMER @Model.checklistCustomer.SubProductName</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <!-- Start to do list -->
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistCustInfoTitle</h2>

                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form class="form-horizontal form-label-left input_mask">
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.CifHeader
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        @Model.checklistCustomer.Cif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.NameHeader
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        @Model.checklistCustomer.CustName
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 col-sm-2 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.ChecklistLegalIdHeader
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        @Model.checklistCustomer.LegalId
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocTitle <small><strong> Checked: <span class="checklist_count_cust">@Model.checklistCustomer.Checked</span>/ Unchecked: <span class="checklist_count_cust">@Model.checklistCustomer.Unchecked</span> </strong> </small></h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <div id="cm-search-box" class="col-md-6 cm-search-box">
                                    <div class="col-md-5">
                                        <label class="">
                                            @SMECustomerWebsite.Core.Resources.Resource.StatusHeader
                                        </label>
                                    </div>
                                    <div class="col-md-7">
                                        <fieldset id="cus_status_search_field">
                                            <select class="form-control" tabindex="-1" id="check_status">
                                                <option class="cus_status_search_option"></option>
                                            </select>
                                        </fieldset>
                                    </div>
                                </div>
                                <table id="checklist_document" class="custom_table table table-striped jambo_table bulk_action">
                                    <thead>
                                        <tr class="headings">
                                            <th class="column-title">Hồ sơ </th>
                                            <th class="column-title">Bản gốc</th>
                                            <th class="column-title"></th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocumentHeader.ToUpper()</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistOrigiHeader.ToUpper()</th>
                                            <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeader.ToUpper()</th>
                                            <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistDuplicateHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDupHeader.ToUpper()</th>
                                            <th class="column-title" width="30%">@SMECustomerWebsite.Core.Resources.Resource.ChecklistNoteHeader.ToUpper()</th>
                                            <th class="column-title last">@SMECustomerWebsite.Core.Resources.Resource.ChecklistSamplePhotoHeader.ToUpper()</th>
                                            <th class="bulk-actions" colspan="7">
                                                <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> )</a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End to do list -->
</div>
@section scripts
{
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="~/Scripts/vendors/fancyImage/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/vendors/fancyImage/jquery.fancybox.css" media="screen" />
    <!-- Switchery -->
    <script src="~/Scripts/vendors/switchery/dist/switchery.min.js"></script>
    <!-- iCheck -->
    <script src="~/Scripts/vendors/iCheck/icheck.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var visibleColumn = [0, 1];
            var table = $('#checklist_document').DataTable({
                bInfo: false,
                bPaginate: false,
                "responsive": true,
                "bAutoWidth": false,
                "order": [[0, 'asc']],
                "bServerSide": true,
                //"bProcessing": true,
                "sAjaxSource": '@Url.Action("ViewChecklistCustomerData", "ProductHandbook")' + '?ccid=@Model.checklistCustomer.Ccid',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                fixedHeader: true,
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "aoColumns": [
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false }],
                "columnDefs": [{
                    "sClass": "a-center ",
                    "aTargets": 2,
                    "mRender": function (data, type, full) {
                        if (data == 0) {
                            return '';
                        } else {
                            return '<span><i class="fa fa-check-square-o"></i></span>';
                        }
                    }
                }, {
                    "sClass": "a-center ",
                    "aTargets": 7,
                    "mRender": function (data, type, full) {
                        if (data != null && data.length > 50) {
                            return '<span class="teaser">' + data.substring(0, 50) + '</span><span class="complete" id="complete' + full[9] + '">' + data.substring(50, data.length) + '</span><span id="more' + full[9] + '" class="more"  onclick=\"showMore(\'' + full[9] + '\' );\">(more)</span>';
                        } else {
                            return data;
                        }

                    }
                }, {
                    "sClass": "a-center ",
                    "aTargets": 8,
                    "mRender": function (data, type, full) {
                        if (data != null && data.length > 0) {
                            return '<a class="btn btn-primary btn-xs" onclick="showDocumentPicture(\'' + full[8] + '\');"><i class="fa fa-eye"></i></a>';
                        } else {
                            return data;
                        }
                    }
                }, {
                    "visible": false, "targets": visibleColumn
                }],
                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;

                    api.column(0, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before(
                                '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                            );
                            last = group;
                        }
                    });
                    api.column(1, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group && group != null) {
                            $(rows).eq(i).before(
                                '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                            );
                            last = group;
                        }
                    });
                }
            });

            $('#check_status').select2({
                placeholder: "Select status",
                data: [{ id: 2, text: 'All' }, { id: 0, text: 'Unchecked' }, { id: 1, text: 'Checked' }]
            });
            table.columns().every(function () {
                var that = this;
                $("#check_status").on("change", function (e) {
                    if (that.index() == 2) {
                        that.search(this.value).draw();
                    }
                });
            });
        });

        //show document image
        function showDocumentPicture(picName) {
            var arrPic = picName.split(",");
            var arrFancy = [];
            arrPic.forEach(function (entry) {
                arrFancy.push({
                    href: '/Scripts/vendors/fancyImage/@Model.checklistCustomer.ProductId/' + entry
                })
            });
            $.fancybox.open(arrFancy, {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        };

        function showMore(id) {
            if ($("#more" + id + "").text() == "(more)") {
                $("#complete" + id + "").show();
                $("#more" + id + "").text(" (less)");
            } else {
                $("#complete" + id + "").hide();
                $("#more" + id + "").text("(more)");
            }
        }
    </script>
}
